<template>
  <!--预览界面 :bodyPadding="'5px ' + setting.options.panelPadding + 'px'"-->
  <panel
    :headhidden="!setting.options.panel"
    :title="setting.options.panelTitle"
    :clickFlag="false"
  >
    <a-form-item class="generate-report">
      <template v-if="widget.type === 'table'">
        <Ftable :setting="setting"></Ftable>
      </template>

      <template v-else-if="widget.type === 'echart'">
        <template v-if="widget.options.type == 'line'">
          <Fline  :setting="setting"></Fline>
        </template>
        <template v-else-if="widget.options.type == 'column'">
          <Fcolumn :setting="setting"></Fcolumn>
        </template>
        <template v-else-if="widget.options.type == 'pie'">
          <Fpie :setting="setting"></Fpie>
        </template>
        <template v-else-if="widget.options.type == 'liquid'">
          <Fliquid :setting="setting"></Fliquid>
        </template>
        <template v-else-if="widget.options.type == 'wordCloud'">
          <FwordCloud :setting="setting"></FwordCloud>
        </template>
      </template>
      <template v-else-if="widget.type == 'tagGroup'">
        <FtagGroup :setting="setting"></FtagGroup>
      </template>
      <template v-else-if="widget.type == 'button'">
        <Fbutton :setting="setting"></Fbutton>
      </template>
      <template v-else-if="widget.type == 'alert'">
        <Falert :setting="setting"></Falert>
      </template>
      <template v-else-if="widget.type == 'pageHeader'">
        <Fnavcrumb :setting="setting"></Fnavcrumb>
      </template>
    </a-form-item>
  </panel>
</template>

<script>
  import {
    Fpie,
    Fcolumn,
    Fline,
    Ftable,
    FwordCloud,
    Fliquid,
    FtagGroup,
    Fbutton,
    Falert,
    Fnavcrumb
  } from '@/mycomponents/dataComponent/index'
  export default {
    components: {
      Fpie,
      Fcolumn,
      Fline,
      Ftable,
      FwordCloud,
      Fliquid,
      FtagGroup,
      Fbutton,
      Falert,
      Fnavcrumb
    },
    // eslint-disable-next-line vue/require-prop-types
    props: ['widget'],
    setup(props) {
      const setting = JSON.parse(JSON.stringify(props.widget))

      return {
        setting,
      }
    },
  }
</script>
<style  lang="less">
  .generate-report > .ant-form-item-control-wrapper {
    width: 100%;
  }
  // .generate-report{
  //   margin-bottom:0!important;
  //   ::v-deep(.ant-form-item-control-wrapper){
  //      width: 100%;
  //   }
  // }
  // ::v-deep(.panel_line){
  //   background-color: red;
  //   margin-bottom:0;
  //   div:nth-child(1){
  //     padding: 0!important;
  //   }
  //   div:nth-child(2){
  //     padding: 0!important;
  //   }
  // }
  // .panel_line{
  //   margin-bottom:0!important;
  //   ::v-deep(div:nth-child(1)){
  //     padding: 0!important;
  //   }
    
  // }
</style>
